<template>
  <div>
    <!-- 总框 -->
    <el-row>
      <!-- 爱车界面 -->
      <el-col :span="8" style="border: 1px solid red;">
        <div style="height: 240px;width: 400px;border-radius: 10px;background-color: #d5e3ff;">
          <!-- 车辆信息 -->
          <el-row style="height: 60px;">
            <!-- 车牌号 -->
            <el-col :span="18">
              <div style="text-align: left;margin-top: 20px;margin-left: 10px;">
                <p v-model="carNumber">
                  <font>{{carNumber}}</font>
                </p>
              </div>
            </el-col>
            <!-- 头像 -->
            <el-col :span="6">
              <div style="text-align: center;margin-top: 10px;">
                <router-link to="/Park_My">
                  <el-button icon="el-icon-user-solid" circle></el-button>
                </router-link>
              </div>
            </el-col>
          </el-row>
          <el-row style="height: 20px;line-height: 20px;">
            —————————————————————
          </el-row>
          <el-row style="height: 60px;">
            <el-col :span="8">
              <div style="text-align: center;">车位到期</div>
              <div style="text-align: center;margin-top: 5px;">2022-12-12</div>
            </el-col>
            <el-col :span="8">
              <div style="text-align: center;">上次保养</div>
              <div style="text-align: center;margin-top: 5px;">2022-12-12</div>
            </el-col>
            <el-col :span="8">
              <div style="text-align: center;">上次停车</div>
              <div style="text-align: center;margin-top: 5px;">2022-12-12</div>
            </el-col>
          </el-row>
          <!-- 我的爱车 -->
          <el-row>
            <el-row style="text-align: left;margin-left: 10px;">
              我的爱车：
              <el-button @click="getCarList" type="primary">查看详情</el-button>
              <el-button type="primary" @click="add">点击添加</el-button>
            </el-row>
          </el-row>
          <!-- 添加车牌详细界面 -->
          <div class="addCar">
            <el-dialog title="添加车牌" :visible.sync="addFormVisible"
              width="900px">
              <div>
                <div>
                  <div v-for="(item,index) in chinaShortName"
                    :class="chinaShortName[index].isClick?'item-box1':'item-box'" @click="clickShortName(index)">
                    <a> {{ item.value }}</a>
                  </div>
                </div>
                <div>
                  <div :class="letters[index].isClick?'item-box2':'item-box'" :style="bgcolor"
                    v-for="(item,index) in letters" @click="clickLetters(index)"><a>{{ item.value }}</a>
                  </div>
                </div>
                <div>
                  <div :class="number[index].isClick?'item-box2':'item-box'" :style="bgcolor"
                    v-for="(item,index) in number" @click="clickNumber(index)"><a>{{ item.value }}</a>
                  </div>
                </div>
                <div style="float: right">
                </div>
                <div class="car-number" style="display: inline-block">
                  车牌号:
                  <div style="display: inline" v-for="(item,index) in firstName">{{ item.value }}·</div>
                  <div style="display: inline;letter-spacing:2px;" v-for="(item,index) in otherName">{{ item.value }}
                  </div>
                </div>
                <div class="backspace" @click="backSpace">
                  <a>退格</a>
                </div>
                <div class="backspace" @click="comfirmCarNum">
                    <a>确认</a>
                </div>
              </div>
            </el-dialog>
          </div>
          <!-- 查看详情页面 -->
          <div>
            <el-dialog title="详细信息" :visible.sync="detailsFormVisible">
              <el-table :data="carlist" style="width: 100%;line-height: 20px;">
                <el-table-column label="序号" width="80" type="index">
                </el-table-column>
                <el-table-column prop="number" label="车牌号" width="180">
                </el-table-column>
                <el-table-column prop="statu" label="是否为默认" width="150">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="updateStatu(scope.$index, scope.row)">设为默认</el-button>
                    <el-button size="mini" @click="check">修改/上传</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>
          </div>
          <!-- 更换图片对话框 -->
          <div>
            <el-dialog title="更换图片" :visible.sync="updateImgFormVisible" width="500px">
              <el-upload class="upload-demo" action="http://localhost:8080/loveCar/getImageUrl"
                :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :limit="2"
                list-type="picture">
                <el-button size="small" type="primary">点击上传(上传后选择想要的图片)</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-dialog>
          </div>
          <!-- 可选服务 -->
          <!-- <el-row style="height: 100px;">
            <el-col :span="8" style="margin-top: 15px;text-align: center;">
              <router-link to="/Park_LoveCar_maintain" tag="no">
                <el-button icon="el-icon-search" type="warning" circle></el-button><br>
              </router-link>
               保养
            </el-col>
            <el-col :span="8" style="margin-top: 15px;text-align: center;">
              <router-link to="/Park_LoveCar_wash" tag="no">
              <el-button icon="el-icon-search" type="warning" circle></el-button><br>
              </router-link>
              洗车
            </el-col>
            <el-col :span="8" style="margin-top: 15px;text-align: center;">
              <router-link to="/Park_LoveCar_gsaup" tag="no">
              <el-button icon="el-icon-search" type="warning" circle></el-button><br>
              </router-link>
              加油
            </el-col>
          </el-row> -->
        </div>
      </el-col>

      <!-- 车辆图片界面 -->
      <el-col :span="16" style="border: 1px solid red;">
        <!-- 展示 -->
        <el-col :span="10" :offset="5">
          <el-row style="border: 1px solid blue;" class="infinite-list">
            <div class="demo-image__placeholder">
              <div class="block">
                <el-image :src="img" style="width: 500px;height: 300px;" fit="fill">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                  <el-image></el-image>
                </el-image>
              </div>
            </div>
          </el-row>
        </el-col>
      </el-col>
    </el-row><br>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //新增的车牌号信息
        newNumber:'',
        //上传图片界面
        updateImgFormVisible: false,
        fileList: [],
        //添加车牌隐藏界面
        addFormVisible: false,
        //添加车牌功能的数据
        bgcolor: {
          backgroundColor: "gray"
        },
        isAllowClickNumber: false,
        isActive: false,
        firstName: [],
        //
        otherName: [],
        //车牌地区简称
        chinaShortName: [
          {
            value: '京',
            label: '京',
            isClick: false
          },
          {
            value: '津',
            label: '津',
            isClick: false
          },
          {
            value: '沪',
            label: '沪',
            isClick: false
          },
          {
            value: '渝',
            label: '渝',
            isClick: false
          },
          {
            value: '冀',
            label: '冀',
            isClick: false
          },
          {
            value: '晋',
            label: '晋',
            isClick: false
          },
          {
            value: '蒙',
            label: '蒙',
            isClick: false
          },
          {
            value: '辽',
            label: '辽',
            isClick: false
          },
          {
            value: '吉',
            label: '吉',
            isClick: false
          },
          {
            value: '黑',
            label: '黑',
            isClick: false
          },
          {
            value: '苏',
            label: '苏',
            isClick: false
          },
          {
            value: '浙',
            label: '浙',
            isClick: false
          },
          {
            value: '皖',
            label: '皖',
            isClick: false
          },
          {
            value: '闽',
            label: '闽',
            isClick: false
          },
          {
            value: '赣',
            label: '赣',
            isClick: false
          },
          {
            value: '鲁',
            label: '鲁',
            isClick: false
          },
          {
            value: '豫',
            label: '豫',
            isClick: false
          },
          {
            value: '鄂',
            label: '鄂',
            isClick: false
          },
          {
            value: '湘',
            label: '湘',
            isClick: false
          },
          {
            value: '粤',
            label: '粤',
            isClick: false
          },
          {
            value: '桂',
            label: '桂',
            isClick: false
          },
          {
            value: '新',
            label: '新',
            isClick: false
          },
          {
            value: '黔',
            label: '黔',
            isClick: false
          },
          {
            value: '云',
            label: '云',
            isClick: false
          }
        ],
        //车牌号码
        letters: [
          {
            label: 'A',
            value: 'A',
            isClick: false
          },
          {
            label: 'B',
            value: 'B',
            isClick: false
          },
          {
            label: 'C',
            value: 'C',
            isClick: false
          },
          {
            label: 'D',
            value: 'D',
            isClick: false
          },
          {
            label: 'E',
            value: 'E',
            isClick: false
          },
          {
            label: 'F',
            value: 'F',
            isClick: false
          },
          {
            label: 'G',
            value: 'G',
            isClick: false
          },
          {
            label: 'H',
            value: 'H',
            isClick: false
          },
          {
            label: 'J',
            value: 'J',
            isClick: false
          },
          {
            label: 'K',
            value: 'K',
            isClick: false
          },
          {
            label: 'L',
            value: 'L',
            isClick: false
          },
          {
            label: 'M',
            value: 'M',
            isClick: false
          },
          {
            label: 'N',
            value: 'N',
            isClick: false
          },
          {
            label: 'P',
            value: 'P',
            isClick: false
          },
          {
            label: 'Q',
            value: 'Q',
            isClick: false
          },
          {
            label: 'R',
            value: 'R',
            isClick: false
          },
          {
            label: 'S',
            value: 'S',
            isClick: false
          },
          {
            label: 'T',
            value: 'T',
            isClick: false
          },
          {
            label: 'U',
            value: 'U',
            isClick: false
          },
          {
            label: 'V',
            value: 'V',
            isClick: false
          },
          {
            label: 'W',
            value: 'W',
            isClick: false
          },
          {
            label: 'X',
            value: 'X',
            isClick: false
          },
          {
            label: 'Y',
            value: 'Y',
            isClick: false
          },
          {
            label: 'Z',
            value: 'Z',
            isClick: false
          }
        ],
        number: [
          {
            label: '0',
            value: '0',
            isClick: false
          },
          {
            label: '1',
            value: '1',
            isClick: false
          },
          {
            label: '2',
            value: '2',
            isClick: false
          },
          {
            label: '3',
            value: '3',
            isClick: false
          },
          {
            label: '4',
            value: '4',
            isClick: false
          },
          {
            label: '5',
            value: '5',
            isClick: false
          },
          {
            label: '6',
            value: '6',
            isClick: false
          },
          {
            label: '7',
            value: '7',
            isClick: false
          },
          {
            label: '8',
            value: '8',
            isClick: false
          },
          {
            label: '9',
            value: '9',
            isClick: false
          }
        ],
        //添加车牌界面
        addFormVisible: false,
        //照片img
        img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        //查看详情界面
        detailsFormVisible: false,
        //用户名
        username: '',
        //爱车列表
        carlist: {},
        size: '',
        carNumber: '辽K76541',
      };
    },
    methods: {
      //添加车牌隐藏界面
      add() {
        this.addFormVisible = true;
      },
      //添加车牌组件方法
      clickShortName: function (index) {
        for (let i = 0; i < this.chinaShortName.length; i++) {
          if (index === i) {
            this.chinaShortName[i].isClick = true
            if (this.firstName.length == 0) {
              this.firstName.push({
                type: "firstName",
                index: index,
                value: this.chinaShortName[i].value
              })
            } else {
              this.firstName.pop();
              this.firstName.push({
                type: "firstName",
                index: index,
                value: this.chinaShortName[i].value
              })
            }
          } else {
            this.chinaShortName[i].isClick = false
          }
        }
        this.isAllowClickNumber = true,
          this.bgcolor.backgroundColor = '';
      },
      clickLetters: function (index) {
        this.limitSize()
        if (!this.isAllowClickNumber) {
          //提示不可以点击
          this.$message("请点击省份简称")
          return;
        }
        for (let i = 0; i < this.letters.length; i++) {
          if (index === i) {
            this.letters[i].isClick = true
            this.otherName.push({
              type: "letters",
              index: index,
              value: this.letters[i].value
            })
          }
        }
      },
      clickNumber: function (index) {
        this.limitSize()
        if (!this.isAllowClickNumber) {
          //提示不可以点击
          this.$message("请点击省份简称")
          return;
        }
        for (let i = 0; i < this.number.length; i++) {
          if (index === i) {
            this.number[i].isClick = true
            this.otherName.push({
              type: "number",
              index: index,
              value: this.number[i].value
            })
          }
        }
      },
      limitSize() {
        if (this.otherName.length > 5) {
          this.$message.warning("输入的车牌号码过长");
          throw new Error("输入的车牌号码过长");
        }
      },
      backSpace: function () {
        if (this.firstName.length == 0) {
          this.isAllowClickNumber = false;
          this.$message("已经清空数据")
          return;
        }
        let pop = this.otherName.pop();
        if (this.otherName.length == 0) {
          let pop1 = this.firstName.pop();
          this.chinaShortName[pop1.index].isClick = false;
          this.isAllowClickNumber = false;
        }
        if (pop.type == 'number') {
          this.number[pop.index].isClick = false
        } else if (pop.type == 'letters') {
          this.letters[pop.index].isClick = false
        }
      },
      comfirmCarNum: function () {
        //确认车牌号
        let arr = [];
        this.firstName.forEach(item => {
          arr.push(item.value)
        })
        this.otherName.forEach(item => {
          arr.push(item.value)
        })
        this.$emit("carNum", arr);
        let carNumber='';
        for(var i in arr){
          carNumber+=arr[i]
        }
        this.newNumber=carNumber;
        console.log(carNumber)
        //发送ajax添加车牌号
        this.$axios.get("http://localhost:8080/loveCar" + "/" + this.username+"/"+this.newNumber).then(res => {
          this.$message({
            message:res.data.data.msg,
            type:'success'
          })
          console.log(res.data.data);
          this.carlist = res.data.data;
          addFormVisible=false;
          this.getCarList();
        })
      },
      //修改图片
      check() {
        this.detailsFormVisible = false;
        this.updateImgFormVisible = true;
      },
      //上传图片操作
      handleRemove(file, fileList) {
        console.log("111", file, fileList);
      },
      handlePreview(file) {
        console.log(file);
        console.log(file.url);
        this.img = file.url;
        console.log(this.img);
        this.updateImgFormVisible = false;
        // this.fileList={};
        //发送ajax
        this.$axios.post("http://localhost:8080/lovaCar/updateImgById" + this.imgID).then(res => {
          this.$message(res.data.msg);
          this.updateImgFormVisible = false;
          this.getCarList();
        })
        // https://gulixueyuan001.oss-cn-beijing.aliyuncs.com/2022/11/26/268ceb9a68804131b40422b4c891a3e03.jpg
        // https://guliedu-20221028.oss-cn-hangzhou.aliyuncs.com/2022/10/29/d0012d5d15c438712a6696c6cb034d3c.jpg
      },
      //获取爱车列表
      getCarList() {
        this.$axios.get("http://localhost:8080/loveCar" + "/" + this.username).then(res => {
          this.detailsFormVisible = true;
          console.log(res.data.data);
          this.carlist = res.data.data;
        })
      },
      updateStatu(index, row) {
        console.log(index, row);
        this.$axios.put("http://localhost:8080/loveCar" + "/" + row.id + "/" + this.username).then(res => {
          this.img = res.data.data.img
          this.carNumber = res.data.data.number;
          this.getCarList();
        })
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作会删除该车辆信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发送ajax
          this.$axios.delete("http://localhost:8080/loveCar/" + row.id).then(res => {
            console.log(res.data.code);
            if (res.data.code == 200) {
              console.log(res.data);
              this.$message({
                type: 'success',
                message: res.data.msg
              });
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
            this.getCarList();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    },
    created() {
      this.username = JSON.parse(sessionStorage.getItem("user")).username
    }
  }
</script>

<style addcar>
  /* .el-descriptions__header {
    border: 1px solid red;
    height: 20px;
  } */
.item-box {
    display: inline-block;
    margin: 10px;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    background-color: black;
    color: white;
    text-align: center;
  }

  .item-box1 {
    display: inline-block;
    margin: 10px;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    background-color: white;
    color: black;
    border: 0.5px solid black;
    text-align: center;
  }

  .item-box2 {
    display: inline-block;
    margin: 10px;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    background-color: white;
    border: 0.5px solid black;
    color: black;
    text-align: center;
  }

  .car-number {
    font-size: 20px;
    font-weight: bolder;
    width: 250px;
    height: 40px;
    margin: 0 auto;
    background-color: darkblue;
    color: white;
    line-height: 40px;
    padding-left: 20px;
    border-radius: 5px;
  }

  .backspace {
    display: inline-block;
    font-size: 20px;
    font-weight: bolder;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    border: 0.5px solid black;
  }
</style>
